<template>
  <div class="main">
    <van-sticky>
      <div class="nav">
        <img :src="back" alt="" @click="handleBack"/>
        <div>重置登录密码</div>
      </div>
    </van-sticky>
    <div class="body">
      <!--            <van-cell title="手机号" value="17664052807"/>-->
      <van-form ref="form" @submit="onSubmit">
      <van-field
          :type="old ? 'text' : 'password'"
          v-model="info.oldPassword"
          label="旧密码"
          :right-icon="old ? 'eye' : 'closed-eye'"
          placeholder="请填写旧密码"
           :rules="[
            { required: true, message: '密码不能为空' },
            { validator:passOne, message: '密码长度在6-20个字符之间' }
          ]"
          @click-right-icon="handleOld"
         
      />
      <van-field
          :type="newP ? 'text' : 'password'"
          v-model="info.newPassword"
          label="新密码"
          :right-icon="newP ? 'eye' : 'closed-eye'"
          placeholder="请填写新密码"
          @click-right-icon="handleNew"
          :rules="[
            { required: true, message: '密码不能为空' },
            { validator:passOne, message: '密码长度在6-20个字符之间' },
            { validator:passTwo, message: '新密码与原密码不能相同' }
          ]"
      />
      <van-field
          :type="newSure ? 'text' : 'password'"
          v-model="info.newPasswordConfirm"
          label="确认密码"
          :right-icon="newSure ? 'eye' : 'closed-eye'"
          placeholder="请填写确认密码"
          @click-right-icon="handleNewSure"
          :rules="[
        { required: true, message: '密码不能为空' },
        { validator:passOne, message: '密码长度在6-20个字符之间' },
        { validator:passThree, message: '两次密码输入不一致' }
      ]"
      />
      <!-- <van-field/> -->
      <div class="footer">
        <van-button class="size" native-type="submit">保存</van-button>
      </div>
    </van-form>
    </div>
    
  </div>
</template>

<script>
import {chargePassword, editUserInfo} from "../../../api/my";

export default {
  name: "loginPassword",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      info: {
        newPassword: '',
        newPasswordConfirm: '',
        oldPassword: ''
      },
      old:false,
      newP:false,
      newSure:false
    }
  },
  mounted() {
  },
  computed: {
    passwordsMatch() {
      return this.info.newPassword === this.info.newPasswordConfirm;
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1);
    },
    onSubmit() {
      // if (!this.passwordsMatch) {
      //   this.$toast.fail('两次密码输入不一致')
      //   return
      // }
      // if(this.info.newPassword === this.info.oldPassword){
      //   this.$toast.fail('新密码与原密码不能相同')
      //   return;
      // }
      // console.log('1111111111111111')
      if (this.info.newPassword && this.info.newPasswordConfirm && this.info.oldPassword) {
        // console.log('-----',this.info)
        chargePassword(this.info).then(res => {
        // console.log('--', res)
        if (res.success == true) {
          this.$toast.success('密码修改成功')
          //退出登录
          let message = {
            action: 'logout',
            param: {
              type: "logout",            //必填
              name: 'my/setting',
              callback: 1
            }
          }
          // console.log(message)
          getInfoFromVue.postMessage(JSON.stringify(message))
        }
      })
      }
      //正则判断两个密码是否相等
      // let data = {
      //   password: this.info.newPassword,
      //
      // }
      // console.log('-----',this.info)
      
    },
    passOne(v) {
      // console.log(v.length)
      if (v.length < 5 || v.length > 20 ) {
        return false
      }
    },
    passTwo(v){
      if (v == this.info.oldPassword) {
        return false
      }
    },
    passThree(v){
      if (v != this.info.newPassword) {
        return false
      }
    },
    handleOld(){
      this.old = !this.old
    },
    handleNew(){
      this.newP = !this.newP
    },
    handleNewSure(){
      this.newSure = !this.newSure
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 500;

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    //padding-top: 30px;
    /deep/ .van-cell__title {
      font-size: 17px;
      font-weight: 400;
    }
    /deep/ .van-cell__value{
      font-size: 17px;
      font-weight: 400;
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;

    .size {
      width: 141px;
      height: 38px;
      opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);
      font-size: 23px;
      font-weight: 500;
      line-height: 36px;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      vertical-align: top;
    }
  }
}
</style>
